<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        *
        {
        	margin: 0;padding: 0;
        }
        li
        {
        	list-style: none;float: left;font-size: 50px;cursor: pointer;color:pink;
        }
        .pf
        {
        	font-weight: bold;font-size: 25px;position: relative;top:20px;left:100px;
        	
        }
    </style>
</head>
<body>
	<ul class="ul">
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
		<li>☆</li>
	</ul>
	<span class="pf">xxx星评分</span>
</body>
</html>
<script type="text/javascript">
	$(function(){
		//声明两个变量
		var wjx_k = '☆';   //空心
		var wjx_s = '★';   //实心
		//鼠标经过事件：鼠标经过li时，把五角星变成实心
		$('.ul>li').on('mouseenter',function(){
			//prevAll():当前元素之前的所有元素 
			//nextAll():当前元素之后的所有元素
			
            // $(this).text(wjx_s).prevAll().text(wjx_s);   //不能再链式下去了,因为$(this).text(wjx_s).prevAll()返回的dom对象变了
            
            // //比如网盘点击的是第三个li
            // //$(this)返回的li对象是第三个li
            // //而$(this).text(wjx_s).prevAll()返回的是第一个li和第二个li(不包括this本身)

            // $(this).nextAll().text(wjx_k);

            //假如需要使用链式编程，需要使用end()方法
            //end():结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
            $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);

		});

		//鼠标离开事件：鼠标离开ul时，所有的星变为空心
		$('.ul').on('mouseleave',function(){
			$(this).children().text(wjx_k);
			//当所有的星变为空心后
			//需要再做一件事：把标记的li变为实心
			$('li.current').text(wjx_s).prevAll().text(wjx_s);
		});

		//点击事件：点击，标记最后一次点击的li是哪个li
		//标记的方法：给li添加类（任意一个类名即可），或者属性都可以，只要可以标记到就可以
		var idx = '';
		$('.ul>li').on('click',function(){
            $(this).addClass('current').siblings().removeClass('current');
            //获取当前li下标
            idx = $(this).index() + 1;

            //动态评分
		    $('.pf').text(idx + "星评分");
           
		});
        
		
	});

</script>